﻿.b-layout {
    display: flex;
    flex: auto;
    flex-direction: column;

    &.b-layout-root {
        height: 100vh;
    }
}

.b-layout,
.b-layout * {
    box-sizing: border-box;
}

.b-layout {
    @keyframes spinner {
        0% {
            transform: translate3d(-50%, -50%, 0) rotate(0deg);
        }

        100% {
            transform: translate3d(-50%, -50%, 0) rotate(360deg);
        }
    }

    > .b-layout-loading {
        &:before {
            animation: 1s linear infinite spinner;
            border: solid 3px #eee;
            border-bottom-color: var(--b-theme-primary);
            border-radius: 50%;
            height: 40px;
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate3d(-50%, -50%, 0);
            width: 40px;
            content: ' ';
        }

        z-index: 9999;
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
    }

    &.b-layout-has-sider {
        flex-direction: row;
        min-height: 0;

        .b-layout {
            overflow-x: hidden;
        }
    }
}

.b-layout-header,
.b-layout-footer {
    flex: 0 0 auto;
}

.b-layout-header {
    color: rgba(0, 0, 0, 0.65);

    &-fixed {
        position: sticky;
        z-index: 1;
        top: 0;
        flex: 0;
    }
}

.b-layout-footer {
    color: rgba(0, 0, 0, 0.65);

    &-fixed {
        position: sticky;
        z-index: 1;
        bottom: 0;
        flex: 0;
    }
}

.b-layout-content {
    flex: 1;
}

.b-layout-sider {
    display: flex;
    position: relative;
    background: #001529;
}

.b-layout-sider-content {
    position: sticky;
    top: 0;
    z-index: 2;
}

.b-layout-header .navbar {
    line-height: inherit;
}
